<template>
  <view class="wh_750 flex flex-column align-center pageHeight bg_F5F5F5">
    <s-header-title :title="state.title" isDisplayBack background="#FFFFFF" isFixed
                    @getPageHeight="getPageHeight"
    ></s-header-title>
    <view :style="{height: state.pageHeight + 'px'}"></view>
    <view class="ss-p-30 richtext">
      <mp-html :content="state.content"></mp-html>
    </view>
    <view class="hW_100"></view>
    <view v-if="state.options.id == 15" class="flex flex-column bg_FFFFFF wh_750"
          style="position: fixed;bottom: 0;padding: 20rpx 0 50rpx 0">
      <view class="flex align-center justify-around">
        <view class="fs_32 color_FFFFFF bg_FF4206 fw_500"
              style="border-radius: 16rpx;padding: 10rpx 50rpx"
              @click.stop="deriveTreeSpectrum"
        >
          导出树谱
        </view>
        <view class="fs_32 color_FFFFFF bg_FF4206 fw_500"
              style="border-radius: 16rpx;padding: 10rpx 50rpx"
              @click="openPopup"
        >
          导出册谱
        </view>
      </view>
    </view>
    <canvas canvas-id="myCanvas"
            style="width: 375px;height: 667px;position: fixed;top: -99999999px;left: 50%;transform: translate(-50%,-50%);z-index:9999999999;"></canvas>
    <!-- #ifdef APP-PLUS -->
    <pdfManage :imageList="page.imageList"></pdfManage>
    <!-- #endif -->
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive, computed, ref } from 'vue';
  import sheep from '@/sheep';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import permision from '@/uni_modules/all-speech/js_sdk/wa-permission/permission';
  import dayjs from 'dayjs';
  import { pathToBase64 } from 'image-tools';
  // #ifdef H5
  import { jsPDF } from 'jspdf';
  // #endif
  import pdfManage from './components/pdfManage.vue';

  const state = reactive({
    title: '',
    content: '',
    pageHeight: 0,
    options: {},
  });
  const page = reactive({
    genealogicalInformation: {},
    imageList: [],
  });
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const userInfo = computed(() => sheep.$store('user').userInfo);

  async function getRichTextContent(id) {
    const { code, data } = await sheep.$api.data.richtext(id);
    if (code === 1) {
      state.content = data.content;
      if (state.title === '') {
        state.title = data.title;
        uni.setNavigationBarTitle({
          title: state.title,
        });
      }
    }
  }

  onLoad((options) => {
    state.options = options;
    if (options.title) {
      state.title = options.title;
      uni.setNavigationBarTitle({
        title: state.title,
      });
    }
    getRichTextContent(options.id);
    if (!!state.options.genealogy_id) {
      getGenealogicalInformation();
    }
  });

  function openPopup() {
    // #ifdef MP-WEIXIN
    uni.showModal({
      title: '提示',
      content: '请在拾亲App端、PC端或H5端使用导出功能(拾亲小程序端受限，暂不支持导出功能)。',
    });
    return;
    // #endif
    sheep.$router.go('/pages/public/select_mode', { genealogy_id: state.options.genealogy_id });
  }

  // 获取册谱详情
  async function getGenealogicalInformation() {
    const {
      data,
    } = await sheep.$api.book_list.getUnreadMessage({
      genealogy_id: state.options.genealogy_id,
    });
    page.genealogicalInformation = data;
  }

  function getPageHeight(number) {
    state.pageHeight = number;
  }

  const ctx = reactive({
    value: null,
  });

  async function derive(index = 0) {
    // #ifdef MP-WEIXIN
    uni.showModal({
      title: '提示',
      content: '请在拾亲App端、PC端或H5端使用导出功能(拾亲小程序端受限，暂不支持导出功能)。',
    });
    // #endif
    // #ifdef APP-PLUS
    let platform = uni.getSystemInfoSync().platform;
    if (platform == 'android') {
      uni.showModal({
        title: '提示',
        content: '需要您开启储存权限，才能导出并下载PDF',
        success: async (res) => {
          if (res.confirm) {
            const limitsOfAuthority = await permision.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE');
            if (limitsOfAuthority == 1) {
              ctx.value = uni.createCanvasContext('myCanvas');
              await drawImage(index);
            } else {
              sheep.$helper.toast('请开启储存权限');
              setTimeout(() => {
                permision.gotoAppPermissionSetting();
              }, 1500);
            }
          }
        },
      });
    } else {
      ctx.value = uni.createCanvasContext('myCanvas');
      await drawImage(index);
    }
    // #endif
    // #ifdef H5
    ctx.value = uni.createCanvasContext('myCanvas');
    await drawImage(index);
    // #endif
  }

  async function drawImage(index = 0) {
    uni.showLoading({
      title: `正在绘制第${index}张照片`,
      mask: true,
    });
    if (index == 0) {
      // 绘制背景
      await drawBackground();
      let coverImage = await getImageInfo({
        imgSrc: page.genealogicalInformation.cover_image_url.indexOf('http') != -1 ? page.genealogicalInformation.cover_image_url : `${nc_image.value}${page.genealogicalInformation.cover_image_url}`,
      });

      await ctx.value.drawImage(coverImage.path, 0, 0, 375, 667);
      await ctx.value.save();
      await drawRect(128, 96, 192, 445, '#FFFFFF');
      await drawRoundRectPath(138, 106, 172, 425, 2, '#000000', '#FFFFFF');
      await drawRoundRectPath(143, 111, 32, 326, 1, '#000000', '#FFFFFF');
      await drawRoundRectPath(178, 111, 92, 326, 1, '#000000', '#FFFFFF');
      await drawRoundRectPath(273, 111, 32, 326, 1, '#000000', '#FFFFFF');
      await drawRoundRectPath(143, 440, 162, 85, 1, '#000000', '#FFFFFF');
      await drawText(page.genealogicalInformation.hall_num, 158, 128, 13, 85, '#42403C', '13', '500', 'center');
      await drawTextVertical(`主编人·${page.genealogicalInformation.editor}`, 158, 430, 13, 85, '#42403C', '13',
        '500', 'center');
      await drawTextCenter(`${page.genealogicalInformation.title}`, 225, 161, 13, 256, '#42403C', '52', '500',
        'center');
      await drawTextVertical(`创建日期·${number2Chinese(page.genealogicalInformation.full_year.gregorian_date)}`,
        290, 430, 13, 85, '#42403C', '13', '500', 'center');
      let backgroundImage = await getImageInfo({
        imgSrc: `${sheep.$store('AI').sq_image_path}/index/canonization_cover_background.png`,
      });
      await ctx.value.drawImage(backgroundImage.path, 145, 442, 160, 83);
      ctx.value.draw(true, async () => {
        // 保存图片
        let {
          fullurl,
        } = await saveImage();
        page.imageList.push(fullurl);
        await drawImage(index + 1);
      });
    } else {
      let num = userInfo.value.is_import != 0 ? page.genealogicalInformation.totalPages : 30;
      if (index <= 21) {
        if (index % 2 != 0) {
          await drawBackground();
          await drawRoundRectPath(7, 66.5, 360, 534, 2, '#000000', 'transparent');
          await drawRoundRectPath(10, 69.5, 354, 528, 2, '#000000', 'transparent');
          await drawRect(48, 68.5, 2, 530, '#000000');
          await drawText(page.genealogicalInformation.title, 28, 125, 13, 256, '#000000', setFontSize(page
            .genealogicalInformation.title), '500', 'center');
          await drawRect(10, 300, 38, 8, '#000000');
          // await drawRect(326, 307, 38, 8, '#000000');
          await drawTriangle(10, 308, 38, 10, '#000000');
          await drawText(page.genealogicalInformation.branch, 28, 345, 13, 256, '#000000', setFontSize(page
            .genealogicalInformation.branch), '500', 'center');
          await drawRect(10, 400, 38, 10, '#000000');
          // await drawRect(326, 407, 38, 8, '#000000');
          await drawText(page.genealogicalInformation.hall_num, 28, 445, 13, 256, '#000000', setFontSize(page
            .genealogicalInformation.hall_num), '500', 'center');
          await drawRect(10, 500, 38, 10, '#000000');
          // await drawRect(326, 507, 38, 8, '#000000');
          let {
            data,
          } = await sheep.$api.book_list.getBookPage({
            genealogy_id: state.options.genealogy_id,
            page: index,
          });
          await drawTextLandscapeOrientation(data.page, 28, 562, 13, 256, '#000000', '15', '500', 'center');
          if (data.sys_id != 2 && data.sys_id != 3) {
            // let jiapu_background_bg = await getImageInfo({
            //   imgSrc: `${sheep.$store('AI').sq_image_path}/chineseSurname/jiapu_background_bg.png`,
            // });
            // await ctx.value.drawImage(jiapu_background_bg.path, 128, 75, 116, 27);
            await drawTextLandscapeOrientation(`${data.cate_title}`, 204.5, 95, 13, 256, '#000000', '15',
              '500', 'center');
          }
          // 目录
          if (data.desc == 1 && data.sys_id == 0) {
            data.content.forEach((item, index) => {
              // -item.title.length * 13 - item.page.toString().length * 13;
              drawHorizontalLine(60, 128 + index * 28, 280, 0, '#000000', 0.6, 4, 6);
              drawRect(60, 123 + index * 28, 2 + item.title.length * 13, 10, '#FFFFFF');
              drawTextLandscapeOrientation(item.title, 60, 132 + index * 28, 13, 256, '#000000',
                '13', '500', 'left');
              drawRect(350 - item.page.toString().length * 8, 123 + index * 28, 2 + item.page.toString().length * 8, 10, '#FFFFFF');
              drawTextLandscapeOrientation(item.page, 350, 132 + index * 28, 13, 256, '#000000',
                '13', '500', 'right');
            });
          }
          // 索引
          if (data.desc == 'cate' && data.sys_id == 1) {
            await drawRect(153.5, 115.5, 2, 460, '#BF8257');
            await drawRect(257.5, 115.5, 2, 460, '#BF8257');
            data.content.forEach((item, index) => {
              if ((index + 1) / 21 <= 1) {
                if (item.desc == 'title') {
                  drawRect(53, 115.5 + index * 22, 98, 20, '#FF4206');
                  drawTextItem(item.title, 102, 129.5 + index * 22, '#FFFFFF', 13, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 53, 129.5 + index * 22, '#000000', 13, '500', 'left');
                  drawTextItem(item.page, 151, 129.5 + index * 22, '#000000', 13, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 53, 129.5 + index * 22, '#000000', 13, '500', 'left');
                  drawTextItem(item.page, 151, 129.5 + index * 22, '#000000', 13, '500',
                    'right');
                }
              } else if ((index + 1) / 21 <= 2) {
                if (item.desc == 'title') {
                  drawRect(157, 115.5 + (index - 21) * 22, 98, 20, '#FF4206');
                  drawTextItem(item.title, 206, 129.5 + (index - 21) * 22, '#FFFFFF', 13, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 157, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                    'left');
                  drawTextItem(item.page, 255, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 157, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                    'left');
                  drawTextItem(item.page, 255, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                    'right');
                }
              } else if ((index + 1) / 21 <= 3) {
                if (item.desc == 'title') {
                  drawRect(262, 115.5 + (index - 42) * 22, 98, 20, '#FF4206');
                  drawTextItem(item.title, 311, 129.5 + (index - 42) * 22, '#FFFFFF', 13, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 262, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                    'left');
                  drawTextItem(item.page, 360, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 262, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                    'left');
                  drawTextItem(item.page, 360, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                    'right');
                }
              }
            });
          }
          // 照片墙栏目
          if (data.desc == 'cate' && data.sys_id == 2) {
            await drawRectangle(175, 200, 76, 10, '#000000', 5);
            await drawRoundRectPath(175, 215, 76, 158, 2, '#000000', 'transparent');
            await drawText('照片墙', 215, 270, 13, 256, '#000000', '33', '500', 'center');
          }
          // 世系表栏目
          if (data.desc == 'cate' && data.sys_id == 3) {
            await drawRectangle(175, 200, 76, 10, '#000000', 5);
            await drawRoundRectPath(175, 215, 76, 158, 2, '#000000', 'transparent');
            await drawText('世系表', 215, 270, 13, 256, '#000000', '33', '500', 'center');
          }
          if (data.desc == 'content' && data.sys_id == 2) {
            if (data.type == 1) {
              for (let index = 0; index < data.content.length; index++) {
                if ((index + 1) / 3 <= 1) {
                  await drawRect(65 + index * 96, 110, 92, 111, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width > res.height) {
                    await ctx.value.drawImage(res.path, 65 + index * 96, 110 + (111 - (res.height / res
                      .width) * 92) / 2, 92, (res.height / res.width) * 92);
                  } else {
                    let scale = 667 / 375;
                    await ctx.value.drawImage(res.path, 65 + (index) * 96 + (92 - (res.width / res
                      .height) * 111) / 2, 110, (res.width / res.height) * 111, 111);
                  }
                }
                if ((index + 1) / 3 > 1 && (index + 1) / 3 <= 2) {
                  await drawRect(65 + (index - 3) * 96, 225, 92, 111, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width > res.height) {
                    await ctx.value.drawImage(res.path, 65 + (index - 3) * 96, 225 + (111 - (res
                      .height / res.width) * 92) / 2, 92, (res.height / res.width) * 92);
                  } else {
                    await ctx.value.drawImage(res.path, 65 + (index - 3) * 96 + (92 - (res.width / res
                      .height) * 111) / 2, 225, (res.width / res.height) * 111, 111);
                  }
                }
                if ((index + 1) / 3 > 2 && (index + 1) / 3 <= 3) {
                  await drawRect(65 + (index - 6) * 96, 340, 92, 111, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width > res.height) {
                    await ctx.value.drawImage(res.path, 65 + (index - 6) * 96, 340 + (111 - (res
                      .height / res.width) * 92) / 2, 92, (res.height / res.width) * 92);
                  } else {
                    await ctx.value.drawImage(res.path, 65 + (index - 6) * 96 + (92 - (res.width / res
                      .height) * 111) / 2, 340, (res.width / res.height) * 111, 111);
                  }
                }
                if ((index + 1) / 3 > 3 && (index + 1) / 3 <= 4) {
                  await drawRect(65 + (index - 9) * 96, 455, 92, 111, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width > res.height) {
                    await ctx.value.drawImage(res.path, 65 + (index - 9) * 96, 455 + (111 - (res
                      .height / res.width) * 92) / 2, 92, (res.height / res.width) * 92);
                  } else {
                    await ctx.value.drawImage(res.path, 65 + (index - 9) * 96 + (92 - (res.width / res
                      .height) * 111) / 2, 455, (res.width / res.height) * 111, 111);
                  }
                }
              }
            } else {
              for (let index = 0; index < data.content.length; index++) {
                await drawRect(65, 95, 280, 470, 'rgba(255,255,255,1)');
                let res = await getImageInfo({
                  imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                    .image : `${nc_image.value}${data.content[index].image}`,
                });
                if (res.width > res.height) {
                  await ctx.value.drawImage(res.path, 65, 95 + (470 - (res.height / res.width) * 280) /
                    2, 280, (res.height / res.width) * 280);
                } else {
                  let scale = 667 / 375;
                  await ctx.value.drawImage(res.path, 65 + (280 - (res.width / res.height) * 470) / 2,
                    95, (res.width / res.height) * 470, 470);
                }
              }
            }
          }
          if (data.desc == 'content' && data.sys_id == 3) {
            for (let index = 0; index < data.content.length; index++) {
              await drawRoundRectPath(28, 85 + index * 250, 290, 245, 2, '#000000', 'transparent');
              await drawLine(81, 85 + index * 250, 1, 204, '#000000');
              await drawLine(174, 85 + index * 250, 1, 204, '#000000');
              await drawLine(266, 85 + index * 250, 1, 245, '#000000');
              await drawLine(28, 235 + index * 250, 53, 1, '#000000');
              await drawLine(28, 262 + index * 250, 239, 1, '#000000');
              await drawLine(28, 289 + index * 250, 239, 1, '#000000');
              await drawLine(82, 115 + index * 250, 236, 1, '#000000');
              await drawLine(82, 146 + index * 250, 184, 1, '#000000');
              await drawLine(266, 192 + index * 250, 52, 1, '#000000');
              await drawLine(266, 218 + index * 250, 52, 1, '#000000');
              await drawTextHeight(data.content[index].shi_cn, 45, 100 + index * 250, 184, 150, '#000000',
                15, '500', 'center');
              await drawTextHeight(`︵${data.content[index].generation || '辈'}︶`, 62, 100 + index * 250, 184, 150,
                '#000000', 15, '500', 'center');
              await drawTextLandscapeOrientation('姓名', 127, 105 + index * 250, 184, 150, '#696969', 15,
                '500', 'center');
              await drawTextLandscapeOrientation(data.content[index].name || '', 127, 135 + index * 250, 184,
                150, '#000000', 13, '500', 'center');
              await drawTextLandscapeOrientation(!!data.content[index].birthday ? dayjs(data.content[index]
                  .birthday).format('YYYY年MM月DD日') : '', 127, 275 + index * 250, 184, 150, '#000000',
                8, '500', 'center');
              await drawTextLandscapeOrientation(!!data.content[index].lunar_birthday ? data.content[index]
                .lunar_birthday : '', 127, 286 + index * 250, 184, 150, '#000000', 8, '500', 'center');
              await drawTextLandscapeOrientation(data.content[index].brother_desc || '', 55, 252 + index *
                250, 184, 150, '#000000', 8, '500', 'center');
              await drawTextLandscapeOrientation(data.content[index].level_desc || '', 55, 280 + index * 250,
                184, 150, '#000000', 8, '500', 'center');
              await drawTextLandscapeOrientation('配偶', 222, 105 + index * 250, 184, 150, '#696969', 15,
                '500', 'center');
              await drawTextLandscapeOrientation(!!data.content[index].qz_birthday ? dayjs(data.content[
                  index].qz_birthday).format('YYYY年MM月DD日') : '', 222, 275 + index * 250, 184, 150,
                '#000000', 8, '500', 'center');
              await drawTextLandscapeOrientation(!!data.content[index].qz_lunar_birthday ? data.content[
                  index].qz_lunar_birthday : '', 222, 286 + index * 250, 184, 150, '#000000', 8,
                '500', 'center');
              await drawTextLandscapeOrientation(data.content[index].qz_name || '', 222, 135 + index * 250,
                184, 150, '#000000', 13, '500', 'center');
              await drawTextLandscapeOrientation('父母', 292, 105 + index * 250, 184, 150, '#696969', 15,
                '500', 'center');
              for (let index1 = 0; index1 < data.content[index].parents.length; index1++) {
                await drawTextLandscapeOrientation(data.content[index].parents[index1].surname + data
                  .content[index].parents[index1].name, 292, 145 + index * 250 + index1 * 15, 184,
                  150, '#000000', 13, '500', 'center');
              }
              await drawTextLandscapeOrientation('子女', 292, 212 + index * 250, 184, 150, '#696969', 15,
                '500', 'center');
              for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                  .content[index].children[index1].name, 292, 237 + index * 250 + index1 * 15, 184,
                  150, '#000000', 13, '500', 'center');
              }
              if (!!data.content[index].remark) {
                // let text = data.content[index].remark.split('\n');
                let nextStart = 300 + index * 250;
                // text.forEach(item => {
                nextStart = fillFeedText({
                  text: data.content[index].remark,
                  x: 35,
                  y: nextStart,
                  maxWidth: 220,
                  lineHeight: 12,
                  color: '#000000',
                  size: 10,
                  maxLineNumber: 3,
                  isMax: true,
                });
                // });
              }
              // await drawRect(83, 148, 90, 113, '#BF8257');
              if (data.content[index].image) {
                let imageInPerson = await getImageInfo({
                  imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                    .image : `${nc_image.value}${data.content[index].image}`,
                });
                console.log(imageInPerson);
                if (imageInPerson.width > imageInPerson.height) {
                  let scale = imageInPerson.width / imageInPerson.height;
                  await ctx.value.drawImage(imageInPerson.path, 83, 148 + (113 - 90 / scale) / 2 +
                    index * 250, 90, 90 / scale);
                } else {
                  let scale = imageInPerson.height / imageInPerson.width;
                  await ctx.value.drawImage(imageInPerson.path, 83 + (90 - 113 / scale) / 2, 148 +
                    index * 250, 113 / scale, 113);
                }
              }
              if (data.content[index].qz_image) {
                let imageInPerson = await getImageInfo({
                  imgSrc: data.content[index].qz_image.indexOf('http') != -1 ? data.content[
                    index].qz_image : `${nc_image.value}${data.content[index].qz_image}`,
                });
                console.log(imageInPerson);
                if (imageInPerson.width > imageInPerson.height) {
                  let scale = imageInPerson.width / imageInPerson.height;
                  await ctx.value.drawImage(imageInPerson.path, 176, 148 + (113 - 89 / scale) / 2 +
                    index * 250, 89, 89 / scale);
                } else {
                  let scale = imageInPerson.height / imageInPerson.width;
                  await ctx.value.drawImage(imageInPerson.path, 176 + (89 - 113 / scale) / 2, 148 +
                    index * 250, 113 / scale, 113);
                }
              }
            }
          }
          // 其他文字内容
          if (data.desc == 'content' && data.sys_id != 2 && data.sys_id != 3) {
            // 分割字符转为数组
            let text = data.content.split('\n');
            let nextStart = 125;
            text.forEach(item => {
              nextStart = fillFeedText({
                text: item,
                x: 69,
                y: nextStart,
                maxWidth: 275,
                lineHeight: 23,
                color: '#000000',
                size: 13,
                isMax: false,
              });
            });
          }
          ctx.value.draw(true, async () => {
            let {
              fullurl,
            } = await saveImage();
            page.imageList.push(fullurl);
            await drawImage(index + 1);
          });
        } else {
          await drawBackground();
          await drawRoundRectPath(7, 66.5, 360, 534, 2, '#000000', 'transparent');
          await drawRoundRectPath(10, 69.5, 354, 528, 2, '#000000', 'transparent');
          await drawRect(325, 68.5, 2, 530, '#000000');
          await drawText(page.genealogicalInformation.title, 345, 125, 13, 256, '#000000', setFontSize(page
            .genealogicalInformation.title), '500', 'center');
          await drawRect(326, 300, 38, 8, '#000000');
          // await drawRect(326, 307, 38, 8, '#000000');
          await drawTriangle(326, 308, 38, 10, '#000000');
          await drawText(page.genealogicalInformation.branch, 345, 345, 13, 256, '#000000', setFontSize(page
            .genealogicalInformation.branch), '500', 'center');
          await drawRect(326, 400, 38, 10, '#000000');
          // await drawRect(326, 407, 38, 8, '#000000');
          await drawText(page.genealogicalInformation.hall_num, 345, 445, 13, 256, '#000000', setFontSize(page
            .genealogicalInformation.hall_num), '500', 'center');
          await drawRect(326, 500, 38, 10, '#000000');
          // await drawRect(326, 507, 38, 8, '#000000');
          let {
            data,
          } = await sheep.$api.book_list.getBookPage({
            genealogy_id: state.options.genealogy_id,
            page: index,
          });
          await drawTextLandscapeOrientation(data.page, 345, 562, 13, 256, '#000000', '15', '500', 'center');
          if (data.sys_id != 2 && data.sys_id != 3) {
            // let jiapu_background_bg = await getImageInfo({
            //   imgSrc: `${sheep.$store('AI').sq_image_path}/chineseSurname/jiapu_background_bg.png`,
            // });
            // await ctx.value.drawImage(jiapu_background_bg.path, 128, 75, 116, 27);
            await drawTextLandscapeOrientation(`${data.cate_title}`, 174.5, 95, 13, 256, '#000000', '15',
              '500', 'center');
          }
          if (data.desc == 1 && data.sys_id == 0) {
            data.content.forEach((item, index) => {
              // drawHorizontalLine(42, 128 + index * 28, 242 - item.title
              //   .length * 13, 0, '#000000', 1, 6, 6);
              drawHorizontalLine(28, 128 + index * 28, 280, 0, '#000000', 0.6, 4, 6);
              drawRect(28, 123 + index * 28, 2 + item.title.length * 13, 10, '#FFFFFF');
              drawTextLandscapeOrientation(item.title, 28, 132 + index * 28, 13, 256, '#000000',
                '13', '500', 'left');
              drawRect(308 - item.page.toString().length * 8, 123 + index * 28, 2 + item.page.toString().length * 8, 10, '#FFFFFF');
              drawTextLandscapeOrientation(item.page, 308, 132 + index * 28, 13, 256, '#000000',
                '13', '500', 'right');
            });
          }
          if (data.desc == 'cate' && data.sys_id == 1) {
            await drawRect(114, 115.5, 2, 455, '#BF8257');
            await drawRect(218, 115.5, 2, 455, '#BF8257');
            data.content.forEach((item, index) => {
              if ((index + 1) / 21 <= 1) {
                if (item.desc == 'title') {
                  drawRect(14, 115.5 + index * 22, 98, 20, '#FF4206');
                  drawTextItem(item.title, 63, 129.5 + index * 22, '#FFFFFF', 13, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 14, 129.5 + index * 22, '#000000', 13, '500', 'left');
                  drawTextItem(item.page, 112, 129.5 + index * 22, '#000000', 13, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 14, 129.5 + index * 22, '#000000', 13, '500', 'left');
                  drawTextItem(item.page, 112, 129.5 + index * 22, '#000000', 13, '500',
                    'right');
                }
              } else if ((index + 1) / 21 <= 2) {
                if (item.desc == 'title') {
                  drawRect(117.5, 115.5 + (index - 21) * 22, 98, 20, '#FF4206');
                  drawTextItem(item.title, 166.5, 129.5 + (index - 21) * 22, '#FFFFFF', 13, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 117.5, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                    'left');
                  drawTextItem(item.page, 215.5, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 117.5, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                    'left');
                  drawTextItem(item.page, 215.5, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                    'right');
                }
              } else if ((index + 1) / 21 <= 3) {
                if (item.desc == 'title') {
                  drawRect(222, 115.5 + (index - 42) * 22, 98, 20, '#FF4206');
                  drawTextItem(item.title, 271, 129.5 + (index - 42) * 22, '#FFFFFF', 13, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 222, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                    'left');
                  drawTextItem(item.page, 320, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 222, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                    'left');
                  drawTextItem(item.page, 320, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                    'right');
                }
              }
            });
          }
          if (data.desc == 'cate' && data.sys_id == 2) {
            await drawRectangle(130, 200, 76, 10, '#000000', 5);
            await drawRoundRectPath(130, 215, 76, 158, 2, '#000000', 'transparent');
            await drawText('照片墙', 169, 270, 13, 256, '#000000', '33', '500', 'center');
          }
          if (data.desc == 'cate' && data.sys_id == 3) {
            await drawRectangle(130, 200, 76, 10, '#000000', 5);
            await drawRoundRectPath(130, 215, 76, 158, 2, '#000000', 'transparent');
            await drawText('世系表', 169, 270, 13, 256, '#000000', '33', '500', 'center');
          }
          if (data.desc == 'content' && data.sys_id == 2) {
            if (data.type == 1) {
              for (let index = 0; index < data.content.length; index++) {
                if ((index + 1) / 3 <= 1) {
                  await drawRect(28 + index * 96, 110, 92, 111, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width > res.height) {
                    await ctx.value.drawImage(res.path, 28 + index * 96, 110 + (111 - (res.height / res
                      .width) * 92) / 2, 92, (res.height / res.width) * 92);
                  } else {
                    let scale = 667 / 375;
                    await ctx.value.drawImage(res.path, 28 + (index) * 96 + (92 - (res.width / res
                      .height) * 111) / 2, 92, (res.width / res.height) * 111, 111);
                  }
                }
                if ((index + 1) / 3 > 1 && (index + 1) / 3 <= 2) {
                  await drawRect(28 + (index - 3) * 96, 225, 92, 111, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width > res.height) {
                    await ctx.value.drawImage(res.path, 28 + (index - 3) * 96, 225 + (111 - (res
                      .height / res.width) * 92) / 2, 92, (res.height / res.width) * 92);
                  } else {
                    await ctx.value.drawImage(res.path, 28 + (index - 3) * 96 + (92 - (res.width / res
                      .height) * 111) / 2, 225, (res.width / res.height) * 111, 111);
                  }
                }
                if ((index + 1) / 3 > 2 && (index + 1) / 3 <= 3) {
                  await drawRect(28 + (index - 6) * 96, 340, 92, 111, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width > res.height) {
                    await ctx.value.drawImage(res.path, 28 + (index - 6) * 96, 340 + (111 - (res
                      .height / res.width) * 92) / 2, 92, (res.height / res.width) * 92);
                  } else {
                    await ctx.value.drawImage(res.path, 28 + (index - 6) * 96 + (92 - (res.width / res
                      .height) * 111) / 2, 340, (res.width / res.height) * 111, 111);
                  }
                }
                if ((index + 1) / 3 > 3 && (index + 1) / 3 <= 4) {
                  await drawRect(28 + (index - 9) * 96, 455, 92, 111, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width > res.height) {
                    await ctx.value.drawImage(res.path, 28 + (index - 9) * 96, 455 + (111 - (res
                      .height / res.width) * 92) / 2, 92, (res.height / res.width) * 92);
                  } else {
                    await ctx.value.drawImage(res.path, 28 + (index - 9) * 96 + (92 - (res.width / res
                      .height) * 111) / 2, 455, (res.width / res.height) * 111, 111);
                  }
                }
              }
            } else {
              for (let index = 0; index < data.content.length; index++) {
                await drawRect(28, 95, 280, 470, 'rgba(255,255,255,1)');
                let res = await getImageInfo({
                  imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                    .image : `${nc_image.value}${data.content[index].image}`,
                });
                if (res.width > res.height) {
                  await ctx.value.drawImage(res.path, 28, 95 + (470 - (res.height / res.width) * 280) /
                    2, 280, (res.height / res.width) * 280);
                } else {
                  let scale = 667 / 375;
                  await ctx.value.drawImage(res.path, 28 + (280 - (res.width / res.height) * 470) / 2,
                    95, (res.width / res.height) * 470, 470);
                }
              }
            }
          }
          if (data.desc == 'content' && data.sys_id == 3) {
            for (let index = 0; index < data.content.length; index++) {
              await drawRoundRectPath(28, 85 + index * 250, 290, 245, 2, '#000000', 'transparent');
              await drawLine(81, 85 + index * 250, 1, 204, '#000000');
              await drawLine(174, 85 + index * 250, 1, 204, '#000000');
              await drawLine(266, 85 + index * 250, 1, 245, '#000000');
              await drawLine(28, 235 + index * 250, 53, 1, '#000000');
              await drawLine(28, 262 + index * 250, 239, 1, '#000000');
              await drawLine(28, 289 + index * 250, 239, 1, '#000000');
              await drawLine(82, 115 + index * 250, 236, 1, '#000000');
              await drawLine(82, 146 + index * 250, 184, 1, '#000000');
              await drawLine(266, 192 + index * 250, 52, 1, '#000000');
              await drawLine(266, 218 + index * 250, 52, 1, '#000000');
              await drawTextHeight(data.content[index].shi_cn, 45, 100 + index * 250, 184, 150, '#000000',
                15, '500', 'center');
              await drawTextHeight(`︵${data.content[index].generation || '辈'}︶`, 62, 100 + index * 250, 184, 150,
                '#000000', 15, '500', 'center');
              await drawTextLandscapeOrientation('姓名', 127, 105 + index * 250, 184, 150, '#696969', 15,
                '500', 'center');
              await drawTextLandscapeOrientation(data.content[index].name || '', 127, 135 + index * 250, 184,
                150, '#000000', 13, '500', 'center');
              await drawTextLandscapeOrientation(!!data.content[index].birthday ? dayjs(data.content[index]
                  .birthday).format('YYYY年MM月DD日') : '', 127, 275 + index * 250, 184, 150, '#000000',
                8, '500', 'center');
              await drawTextLandscapeOrientation(!!data.content[index].lunar_birthday ? data.content[index]
                .lunar_birthday : '', 127, 286 + index * 250, 184, 150, '#000000', 8, '500', 'center');
              await drawTextLandscapeOrientation(data.content[index].brother_desc || '', 55, 252 + index *
                250, 184, 150, '#000000', 8, '500', 'center');
              await drawTextLandscapeOrientation(data.content[index].level_desc || '', 55, 280 + index * 250,
                184, 150, '#000000', 8, '500', 'center');
              await drawTextLandscapeOrientation('配偶', 222, 105 + index * 250, 184, 150, '#696969', 15,
                '500', 'center');
              await drawTextLandscapeOrientation(!!data.content[index].qz_birthday ? dayjs(data.content[
                  index].qz_birthday).format('YYYY年MM月DD日') : '', 222, 275 + index * 250, 184, 150,
                '#000000', 8, '500', 'center');
              await drawTextLandscapeOrientation(!!data.content[index].qz_lunar_birthday ? data.content[
                  index].qz_lunar_birthday : '', 222, 286 + index * 250, 184, 150, '#000000', 8,
                '500', 'center');
              await drawTextLandscapeOrientation(data.content[index].qz_name || '', 222, 135 + index * 250,
                184, 150, '#000000', 13, '500', 'center');
              await drawTextLandscapeOrientation('父母', 292, 105 + index * 250, 184, 150, '#696969', 15,
                '500', 'center');
              for (let index1 = 0; index1 < data.content[index].parents.length; index1++) {
                await drawTextLandscapeOrientation(data.content[index].parents[index1].surname + data
                  .content[index].parents[index1].name, 292, 145 + index * 250 + index1 * 15, 184,
                  150, '#000000', 13, '500', 'center');
              }
              await drawTextLandscapeOrientation('子女', 292, 212 + index * 250, 184, 150, '#696969', 15,
                '500', 'center');
              for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                  .content[index].children[index1].name, 292, 237 + index * 250 + index1 * 15, 184,
                  150, '#000000', 13, '500', 'center');
              }
              if (!!data.content[index].remark) {
                // let text = data.content[index].remark.split('\n');
                let nextStart = 300 + index * 250;
                // text.forEach(item => {
                nextStart = fillFeedText({
                  text: data.content[index].remark,
                  x: 35,
                  y: nextStart,
                  maxWidth: 220,
                  lineHeight: 12,
                  color: '#000000',
                  size: 10,
                  maxLineNumber: 3,
                  isMax: true,
                });
                // });
              }
              // await drawRect(83, 148, 90, 113, '#BF8257');
              if (data.content[index].image) {
                let imageInPerson = await getImageInfo({
                  imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                    .image : `${nc_image.value}${data.content[index].image}`,
                });
                console.log(imageInPerson);
                if (imageInPerson.width > imageInPerson.height) {
                  let scale = imageInPerson.width / imageInPerson.height;
                  await ctx.value.drawImage(imageInPerson.path, 83, 148 + (113 - 90 / scale) / 2 +
                    index * 250, 90, 90 / scale);
                } else {
                  let scale = imageInPerson.height / imageInPerson.width;
                  await ctx.value.drawImage(imageInPerson.path, 83 + (90 - 113 / scale) / 2, 148 +
                    index * 250, 113 / scale, 113);
                }
              }
              if (data.content[index].qz_image) {
                let imageInPerson = await getImageInfo({
                  imgSrc: data.content[index].qz_image.indexOf('http') != -1 ? data.content[
                    index].qz_image : `${nc_image.value}${data.content[index].qz_image}`,
                });
                console.log(imageInPerson);
                if (imageInPerson.width > imageInPerson.height) {
                  let scale = imageInPerson.width / imageInPerson.height;
                  await ctx.value.drawImage(imageInPerson.path, 176, 148 + (113 - 89 / scale) / 2 +
                    index * 250, 89, 89 / scale);
                } else {
                  let scale = imageInPerson.height / imageInPerson.width;
                  await ctx.value.drawImage(imageInPerson.path, 176 + (89 - 113 / scale) / 2, 148 +
                    index * 250, 113 / scale, 113);
                }
              }
            }
          }
          if (data.desc == 'content' && data.sys_id != 2 && data.sys_id != 3) {
            // 分割字符转为数组
            let text = data.content.split('\n');
            let nextStart = 125;
            text.forEach(item => {
              nextStart = fillFeedText({
                text: item,
                x: 35,
                y: nextStart,
                maxWidth: 275,
                lineHeight: 23,
                color: '#000000',
                size: 13,
                isMax: false,
              });
            });
          }
          ctx.value.draw(true, async () => {
            let {
              fullurl,
            } = await saveImage();
            page.imageList.push(fullurl);
            await drawImage(index + 1);
          });
        }
      } else {
        // await createPdf();
      }
    }
  }

  function setFontSize(title) {
    if (title.length <= 4) {
      return 15;
    }
    return 10;
  }

  // 绘制背景
  async function drawBackground() {
    ctx.value.setFillStyle('#FFFFFF');
    ctx.value.fillRect(0, 0, 375, 667);
  }

  // 绘制线条
  async function drawLine(x, y, width, height, color) {
    ctx.value.setFillStyle(color);
    ctx.value.fillRect(x, y, width, height);
  }

  // 绘制矩形
  async function drawRect(x, y, width, height, color) {
    ctx.value.setFillStyle(color);
    ctx.value.fillRect(x, y, width, height);
  }

  // 绘制三角形
  async function drawTriangle(x, y, width, height, color) {
    ctx.value.setFillStyle(color);
    ctx.value.beginPath();
    ctx.value.moveTo(x, y);
    ctx.value.lineTo(x + width, y);
    ctx.value.lineTo(x, y + height);
    ctx.value.closePath();
    ctx.value.fill();
  }

  // 绘制图片
  async function getImageInfo({ imgSrc }) {
    return new Promise((resolve, errs) => {
      uni.getImageInfo({
        src: imgSrc,
        success: function(image) {
          resolve(image);
        },
        fail(err) {
          errs(err);
        },
      });
    });
  }

  // 绘制矩形带有线条
  async function drawRoundRectPath(x, y, width, height, borderWidth, borderColor, fillColor) {
    ctx.value.lineWidth = borderWidth;
    ctx.value.fillStyle = fillColor;
    ctx.value.strokeStyle = borderColor;
    ctx.value.fillRect(x, y, width, height);
    ctx.value.strokeRect(x, y, width, height);
  }

  // 绘制文字竖向（正序）
  async function drawText(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    let arr = text.split('');
    for (let i = 0; i < arr.length; i++) {
      ctx.value.fillText(arr[i], x, y + i * (Number(fontSize) + 2));
    }
  }

  // 绘制文字横向（正序）
  async function drawTextLandscapeOrientation(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    ctx.value.fillText(text, x, y);
  }

  // 绘制文字竖向（倒序）
  async function drawTextVertical(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    let arr = text.split('');
    arr.reverse();
    for (let i = 0; i < arr.length; i++) {
      ctx.value.fillText(arr[i], x, y - i * (Number(fontSize) + 2));
    }
  }

  // 绘制文字竖向（中间）
  async function drawTextCenter(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    let arr = text.split('');
    if (arr.length == 1) {
      await drawTextItem(arr[0], x, y + (256 / 2), color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 2) {
      await drawTextItem(arr[0], x, y + (186 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (326 / 2), color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 3) {
      await drawTextItem(arr[0], x, y + (126 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (256 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (386 / 2), color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 4) {
      await drawTextItem(arr[0], x, y + (46 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (186 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (326 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (466 / 2), color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 5) {
      await drawTextItem(arr[0], x, y + (6 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (136 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (256 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (386 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (526 / 2), color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 6) {
      await drawTextItem(arr[0], x, y + (6 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (106 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (206 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (306 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (406 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (506 / 2), color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 7) {
      await drawTextItem(arr[0], x, y + (6 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (86 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (166 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (246 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (326 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (406 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (486 / 2), color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 8) {
      await drawTextItem(arr[0], x, y + (0 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (70 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (140 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (210 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (280 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (350 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (420 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (490 / 2), color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 9) {
      await drawTextItem(arr[0], x, y + (0 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (65 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (130 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (195 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (260 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (325 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (390 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (455 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (520 / 2), color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 10) {
      await drawTextItem(arr[0], x, y + (-20 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (40 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (100 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (160 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (220 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (280 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (340 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (400 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (460 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (520 / 2), color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 11) {
      await drawTextItem(arr[0], x, y + (-20 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (30 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (80 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (130 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (180 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (230 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (280 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (330 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (380 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (430 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (480 / 2), color, 22, fontWeight, textAlign);
    } else if (arr.length == 12) {
      await drawTextItem(arr[0], x, y + (-30 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (20 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (70 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (120 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (170 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (220 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (270 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (320 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (370 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (420 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (470 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[11], x, y + (520 / 2), color, 22, fontWeight, textAlign);
    } else if (arr.length == 13) {
      await drawTextItem(arr[0], x, y + (-50 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (-2 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (46 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (94 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (142 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (190 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (238 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (286 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (334 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (382 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (430 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[11], x, y + (478 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[12], x, y + (526 / 2), color, 22, fontWeight, textAlign);
    } else if (arr.length == 14) {
      await drawTextItem(arr[0], x, y + (-52 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (-8 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (36 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (80 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (124 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (168 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (212 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (256 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (300 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (344 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (388 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[11], x, y + (432 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[12], x, y + (476 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[13], x, y + (520 / 2), color, 20, fontWeight, textAlign);
    }
  }

  // 绘制每一项的文字
  async function drawTextItem(text, x, y, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    ctx.value.fillText(text, x, y);
  }

  // 绘制横向虚线
  async function drawHorizontalLine(x, y, width, height, color, lineWidth, dashLength, dashGap) {
    ctx.value.save();
    ctx.value.setLineDash([dashLength, dashGap], 5);
    ctx.value.setLineWidth(lineWidth);
    ctx.value.setStrokeStyle(color);
    ctx.value.strokeRect(x, y, width, height);
    ctx.value.restore();
  }

  // 绘制矩形圆角
  async function drawRectangle(x, y, width, height, color, radius) {
    ctx.value.save();
    ctx.value.setFillStyle(color);
    // 开始绘制圆角矩形
    ctx.value.beginPath();
    // 左上角圆弧
    ctx.value.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
    // 右上角圆弧
    ctx.value.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);
    // 右下角圆弧
    ctx.value.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5);
    // 左下角圆弧
    ctx.value.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);
    // 闭合路径
    ctx.value.closePath();
    // 填充颜色
    ctx.value.fill();
    // 绘制边框
    ctx.value.stroke();
    ctx.value.restore();
  }

  // 数组转换文字
  function number2Chinese(str) {
    let chinese = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
    let numStr = str.replace(/[^0-9]+/g, '');
    let year = chinese[numStr[0]] + chinese[numStr[1]] + chinese[numStr[2]] + chinese[numStr[3]];
    let month = numStr[4] === '0' ? chinese[numStr[5]] : chinese[10] + chinese[numStr[5]];
    let day = '';
    if (numStr[6] === '0') {
      day = chinese[numStr[7]];
    } else if (numStr[6] === '1') {
      if (numStr[7] === '0') {
        day = chinese[10];
      } else {
        day = chinese[10] + chinese[numStr[7]];
      }
    } else if (numStr[6] === '2' || numStr[6] === '3') {
      if (numStr[7] === '0') {
        day = chinese[numStr[6]] + chinese[10];
      } else {
        day = chinese[numStr[6]] + chinese[10] + chinese[numStr[7]];
      }
    }
    return year + '年' + month + '月' + day + '日';
  }

  // 获取文本的高度并竖向垂直居中
  async function drawTextHeight(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    let arr = text.split('');
    let intermediateLine = height / 2 - (arr.length * fontSize / 2);
    for (let i = 0; i < arr.length; i++) {
      ctx.value.fillText(arr[i], x, intermediateLine + y + i * (Number(fontSize) + 2));
    }
  }

  // 保存图片
  async function saveImage() {
    return new Promise(async (resolve, reject) => {
      setTimeout(async () => {
        await uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          width: 375,
          height: 667,
          destWidth: 375 * 4,
          destHeight: 667 * 4,
          success: async res => {
            // #ifdef H5
            resolve({
              fullurl: res.tempFilePath,
            });
            // #endif
            // #ifdef APP-PLUS
            let base64 = await pathToBase64(res.tempFilePath);
            resolve({
              fullurl: base64,
            });
            // #endif
            // #ifndef H5
            // uni.uploadFile({
            //   url: `${baseUrl}/api/common/uploadFile`,
            //   filePath: res.tempFilePath,
            //   fileType: 'image',
            //   name: 'pics',
            //   formData: {
            //     'file': 'pics',
            //   },
            //   header: {
            //     // #ifdef MP
            //     'Content-Type': 'multipart/form-data',
            //     // #endif
            //     ['token']: uni.getStorageSync('token'),
            //     'file': res.tempFilePath,
            //   },
            //   success: async (res) => {
            //     resolve(JSON.parse(res.data).data);
            //   },
            // });
            // #endif
          },
        });
      }, 100);
    });
  }

  // 绘制完成上传图片下载链接
  async function createPdf() {
    uni.hideLoading();
    uni.showLoading({
      title: '正在生成中...',
      mask: true,
    });
    // #ifdef H5
    const PDF = new jsPDF('p', 'cm', [22.225 * 2, 30.163 * 2], true);
    for (let i = 0; i < page.imageList.length; i++) {
      console.log(page.imageList[i]);
      const url = page.imageList[i];
      // PDF.addImage(url, 'png', 1, 1, 375, 667);
      PDF.addImage(url, 'png', 1.111, -2.7075, 20.003, 35.578, '', 'FAST');
      PDF.addPage([22.225, 30.163], 'portrait');
    }
    // 删除最后一页留白
    const targetPage = PDF.internal.getNumberOfPages();
    PDF.deletePage(targetPage);
    PDF.deletePage(1);
    PDF.save('PDF存档.pdf');
    uni.hideLoading();
    // #endif

    // #ifdef MP-WEIXIN
    sheep.$helper.toast('请前往H5端进行导出');
    // #endif

    // #ifdef APP-PLUS
    uni.$emit('managePdf', page.imageList);
    // #endif
  }

  // 填充自动换行的文本
  function fillFeedText({ text, x, y, maxWidth, lineHeight, color, size, maxLineNumber, isMax }) {
    ctx.value.save();
    // 文本配置
    ctx.value.setFontSize(size);
    ctx.value.setFillStyle(color);
    ctx.value.lineWidth = 0.8; // 边框宽度

    // 计算文本换行宽高，换行逻辑
    const words = text.split('');
    let line = '';
    const lines = [];
    for (let i = 0; i < words.length; i++) {
      const word = words[i];
      const testLine = line + word;
      const metrics = ctx.value.measureText(testLine);
      if (metrics.width > maxWidth && i > 0) {
        lines.push(line);
        line = word;
      } else {
        line = testLine;
      }
    }
    ctx.value.setTextAlign('left');

    // 填充文本
    lines.push(line);
    let nextStart = 0;
    lines.forEach((line, index) => {
      if (isMax) {
        if (index <= maxLineNumber - 1) {
          if (index == maxLineNumber - 1) {
            let text = line.slice(0, -3) + '...';
            ctx.value.fillText(text, x, y + ((index++) * lineHeight), maxWidth);
            return nextStart = y + ((index++) * lineHeight);
          }
          ctx.value.fillText(line, x, y + ((index++) * lineHeight), maxWidth);
          nextStart = y + ((index++) * lineHeight);
        }
      } else {
        ctx.value.fillText(line, x, y + ((index++) * lineHeight), maxWidth);
        nextStart = y + ((index++) * lineHeight);
      }

    });
    ctx.value.restore();

    return nextStart;
  }

  // 导出树谱
  function deriveTreeSpectrum() {
    uni.$emit('setExport');
    uni.navigateBack({
      delta: 2,
    });
  }
</script>

<style lang="scss" scoped>
  .set-title {
    margin: 0 30rpx;
  }

  .richtext {
    //line-height: 0;
    font-weight: 500;
  }
</style>
